<template>
  <div @mousemove="handleMove" @click="handleClick" class="container">
    <div style="display: flex">
      <MainTank :fwdColor="fwdColor1" :aftColor="aftColor1" class="tank_1" />
      <CenterTank
        :cLeftColor="cLeftColor"
        :cRightColor="cRightColor"
        :crossColor="crossColor"
        style="margin-left: -20px"
      />
      <MainTank
        :fwdColor="fwdColor2"
        :aftColor="aftColor2"
        style="margin-left: -20px"
        direction
        message="R  MAIN"
        class="tank_2"
      />
    </div>
    <div style="margin-top: 120px">
      <span style="margin-left: 10px; color: rgb(8, 214, 255); font-weight: 600"
        >MIN&nbsp;FUEL&nbsp;TEMP</span
      >
      <span style="margin-left: 10px; font-weight: 600">-37C</span>
      <br />
      <span style="margin-left: 10px; color: rgb(8, 214, 255); font-weight: 600"
        >FUEL&nbsp;TEMP</span
      >
      <span style="margin-left: 10px; font-weight: 600">+14C</span>
    </div>
  </div>
</template>

<script setup>
import MainTank from '@r/components/lower/fuel/MainTank.vue'
import CenterTank from '@r/components/lower/fuel/CenterTank.vue'
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useStore } from 'vuex'

const fwdColor1 = reactive({
  color: 'rgb(8, 214, 255)'
})
const aftColor1 = reactive({
  color: 'rgb(8, 214, 255)'
})
const fwdColor2 = reactive({
  color: 'rgb(8, 214, 255)'
})
const aftColor2 = reactive({
  color: 'rgb(8, 214, 255)'
})
const store = useStore()

const cLeftColor = reactive({
  color: 'rgb(8, 214, 255)'
})
const cRightColor = reactive({
  color: 'rgb(8, 214, 255)'
})
const crossColor = reactive({
  color: 'rgb(8, 214, 255)'
})

onMounted(() => {
  window.addEventListener('keydown', handleKeydown) // 在组件挂载时添加键盘事件监听
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeydown) // 在组件销毁时移除事件监听
})

const boxes = [
  { x: 20, y: 238, width: 50, height: 55 }, //lFwdPump
  { x: 20, y: 310, width: 50, height: 55 }, //lAftPump
  { x: 532, y: 238, width: 50, height: 55 }, //rFwdPump
  { x: 532, y: 310, width: 50, height: 55 }, //rAftPump
  { x: 236, y: 310, width: 50, height: 55 }, //cLeftPump
  { x: 318, y: 310, width: 50, height: 55 }, //cRightPump
  { x: 285, y: 170, width: 40, height: 40 }, //fwdCrossPump
  { x: 285, y: 250, width: 40, height: 40 } //aftCrossPump
]

let clickItem = null

const handleMove = (event) => {
  const x = event.clientX
  const y = event.clientY
  if (
    x >= boxes[0].x &&
    x <= boxes[0].x + boxes[0].width &&
    y >= boxes[0].y &&
    y <= boxes[0].y + boxes[0].height
  ) {
    document.body.style.cursor = 'pointer'
    fwdColor1.color = 'rgb(8, 255, 66)'
    clickItem = 'lFwdPump'
  } else if (
    x >= boxes[1].x &&
    x <= boxes[1].x + boxes[1].width &&
    y >= boxes[1].y &&
    y <= boxes[1].y + boxes[1].height
  ) {
    document.body.style.cursor = 'pointer'
    aftColor1.color = 'rgb(8, 255, 66)'
    clickItem = 'lAftPump'
  } else if (
    x >= boxes[2].x &&
    x <= boxes[2].x + boxes[2].width &&
    y >= boxes[2].y &&
    y <= boxes[2].y + boxes[2].height
  ) {
    document.body.style.cursor = 'pointer'
    fwdColor2.color = 'rgb(8, 255, 66)'
    clickItem = 'rFwdPump'
  } else if (
    x >= boxes[3].x &&
    x <= boxes[3].x + boxes[3].width &&
    y >= boxes[3].y &&
    y <= boxes[3].y + boxes[3].height
  ) {
    document.body.style.cursor = 'pointer'
    aftColor2.color = 'rgb(8, 255, 66)'
    clickItem = 'rAftPump'
  } else if (
    x >= boxes[4].x &&
    x <= boxes[4].x + boxes[4].width &&
    y >= boxes[4].y &&
    y <= boxes[4].y + boxes[4].height
  ) {
    document.body.style.cursor = 'pointer'
    cLeftColor.color = 'rgb(8, 255, 66)'
    clickItem = 'cLeftPump'
  } else if (
    x >= boxes[5].x &&
    x <= boxes[5].x + boxes[5].width &&
    y >= boxes[5].y &&
    y <= boxes[5].y + boxes[5].height
  ) {
    document.body.style.cursor = 'pointer'
    cRightColor.color = 'rgb(8, 255, 66)'
    clickItem = 'cRightPump'
  } else if (
    x >= boxes[6].x &&
    x <= boxes[6].x + boxes[6].width &&
    y >= boxes[6].y &&
    y <= boxes[6].y + boxes[6].height
  ) {
    document.body.style.cursor = 'pointer'
    crossColor.color = 'rgb(8, 255, 66)'
    clickItem = 'fwdCrossValve'
  } else if (
    x >= boxes[7].x &&
    x <= boxes[7].x + boxes[7].width &&
    y >= boxes[7].y &&
    y <= boxes[7].y + boxes[7].height
  ) {
    document.body.style.cursor = 'pointer'
    crossColor.color = 'rgb(8, 255, 66)'
    clickItem = 'aftCrossValve'
  } else {
    document.body.style.cursor = 'default'
    if (clickItem) {
      switch (clickItem) {
        case 'lFwdPump':
          fwdColor1.color = 'rgb(8, 214, 255)'
          break
        case 'lAftPump':
          aftColor1.color = 'rgb(8, 214, 255)'
          break
        case 'rFwdPump':
          fwdColor2.color = 'rgb(8, 214, 255)'
          break
        case 'rAftPump':
          aftColor2.color = 'rgb(8, 214, 255)'
          break
        case 'cLeftPump':
          cLeftColor.color = 'rgb(8, 214, 255)'
          break
        case 'cRightPump':
          cRightColor.color = 'rgb(8, 214, 255)'
          break
        case 'fwdCrossValve':
          crossColor.color = 'rgb(8, 214, 255)'
          break
        case 'aftCrossValve':
          crossColor.color = 'rgb(8, 214, 255)'
          break
        default:
          console.log('Unknown clickItem')
      }
    }
  }
}

const handleClick = () => {
  if (clickItem) {
    switch (clickItem) {
      case 'lFwdPump':
        store.dispatch('fuel/setLFwdPump')
        break
      case 'lAftPump':
        store.dispatch('fuel/setLAftPump')
        break
      case 'rFwdPump':
        store.dispatch('fuel/setRFwdPump')
        break
      case 'rAftPump':
        store.dispatch('fuel/setRAftPump')
        break
      case 'cLeftPump':
        store.dispatch('fuel/setcLeftPump')
        break
      case 'cRightPump':
        store.dispatch('fuel/setcRightPump')
        break
      case 'fwdCrossValve':
        store.dispatch('fuel/setFwdCrossPump')
        break
      case 'aftCrossValve':
        store.dispatch('fuel/setAftCrossPump')
        break
    }
  }
}

const handleKeydown = (event) => {
  // 将按键转换为大写字母
  const key = event.key.toUpperCase()

  const keyActions = {
    Q: () => store.dispatch('fuel/setFwdCrossPump'),
    W: () => store.dispatch('fuel/setAftCrossPump'),
    E: () => store.dispatch('fuel/setcLeftPump'),
    R: () => store.dispatch('fuel/setcRightPump'),
    A: () => store.dispatch('fuel/setLFwdPump'),
    S: () => store.dispatch('fuel/setLAftPump'),
    D: () => store.dispatch('fuel/setRFwdPump'),
    F: () => store.dispatch('fuel/setRAftPump')
  }

  // 如果按键有对应的动作，则执行
  if (keyActions[key]) {
    keyActions[key]()
  }
}
</script>

<style scoped>
.container {
  height: 591px;
  width: 634px;
}

.tank_1 {
  margin-top: 150px;
}

.tank_2 {
  margin-top: 150px;
}
</style>
